<template>
  <div class="inline">
    <div class="inline">
      <a-popconfirm
        :disabled="disabled || submitLoading"
        :ok-button-props="{ color: action.config.submitColor }"
        :ok-text="submitText"
        :placement="action.config.placement"
        cancel-text="取消"
        @confirm="handleConfirm">
        <template #title>
          <div style="min-width: 150px">{{ title }}</div>
        </template>
        <a v-if="type === 'link'">{{ action.text }}</a>
        <a-button v-else :disabled="disabled" :type="action.config.color">{{ action.text }}</a-button>
      </a-popconfirm>
    </div>
  </div>
</template>

<script setup>

const props = defineProps(['action', 'type', 'selectedRows', 'extraParams']);
const {action, type, selectedRows, extraParams} = toRefs(props);

const emit = defineEmits(['change']);

const submitText = computed(() => action.value.text);
const title = computed(() => `确定${action.value.text}吗？`);

const {isLoading, execute} = useApi({
  method: 'POST',
  url: () => action.value.config.submitUrl,
  immediate: false
});

const submitLoading = ref(false);
const disabled = computed(() => isLoading.value);

const handleConfirm = async () => {
  const responseData = await execute({
    data: {
      ...extraParams.value
    }
  });

  const submitSuccessMessage = action.value.config.submitSuccessMessage;
  if (typeof submitSuccessMessage === 'function') {
    message.success(submitSuccessMessage(responseData));
  } else {
    message.success(submitSuccessMessage);
  }
  emit('change');
};
</script>
